今天來實作 TDD精神的測試項目。
學習資源:
https://www.youtube.com/watch?v=foiMMI-pEes&list=PLC3y8-rFHvwirqe1KHFCHJ0RqNuN61SJd&index=9

(一) 設定測試情境

我需要一個 Component 在進入首頁後，顯示對使用者的問候。

測試一: 確認測試 component 有在畫面上。

test("Render a Greet Commponent", () => {
    render(<Greeting />);
    
    const textEl = screen.getByText("Hello");
    expect(textEl).toBeInTheDocument();
});

測試二: 確認測試 component 中有傳入使用者名稱。

test("Render a Greet Commponent with a name", () => {
    render(<Greeting name="Joanna" />);
    
    const textEl = screen.getByText("Hello Joanna");
    expect(textEl).toBeInTheDocument();
});

執行測試內容，結果為 Fail。

(二) 實作功能讓測試通過

建立 Greet commponent

interface GreetingProps{
    name?: string;
}
export default function Greeting(props: GreetingProps){
    return(
        <h1>Hello {props.name||""}</h1>
    )
}

執行測試內容，結果為 Success。